<!doctype html>
<html ng-app="phonecatApp">
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=400px, user-scalable=no" />

<head>
	<script src="plugin/angular.1.5.0.min.js"></script>
	<script type="text/javascript" src="plugin/angular-route.min.js"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/h5style/css/import-min.css">
	<!-- 1.7.1/1.11.1/2.1.1 -->
	<script type="text/javascript" src="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/jQuery/Lib/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="plugin/angular-animate.min.js"></script>
	<!-- https://code.angularjs.org/1.5.0/ -->
	<link rel="stylesheet" href="plugin/spinkit/angular-spinkit.min.css">
	<script src="plugin/spinkit/angular-spinkit.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>
	<div class="container-fluid">
		<hello></hello>
		<div class="row">
			<div class="col-xs-3">
				<a class="btn btn-info" href="#" role="button">列表</a>
			</div>
			<div class="col-xs-3">
				<a class="btn btn-info" href="#" role="button">新增</a>
			</div>
			<div class="col-xs-3">
				<a class="btn btn-info" href="#addStudent" role="button">Add</a>
			</div>
			<div class="col-xs-3">
				<a class="btn btn-info" href="#viewStudents" role="button">View</a>
			</div>
		</div>
	</div>
	<div class="container-fluid" style="position: relative;">
		<div class="row">
			<div ng-view class="page {{pageClass}}"></div>
		</div>
	</div>
	<script type="text/ng-template" id="viewStudents.htm">
		<h2> View Students </h2> {{message}}
	</script>
	<script type="text/ng-template" id="addStudent.htm">
		<h2> Add Student </h2> {{message}}
	</script>
	<script type="text/javascript">
	var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'angular-spinkit']);

	phonecatApp.factory("Data",function(){
		var _this;
		_this = {
			log : function(log){
				console.log(log);
			},
			'message' : 'abcd'
		} ;
		return _this;
	});

	phonecatApp.directive("hello",function(){
		return {
			restrict : 'E',
			template : '<div>Hi there</div>',
			replace  : true
		};
	});


	phonecatApp.service('MyService', function() {
		this.greeting = 'Hello from service';
	});

	phonecatApp.config(['$routeProvider', function($routeProvider) {
		$routeProvider.when('/view1', {
			templateUrl: 'partials/partial1.html',
			controller: 'MyCtrl1'
		})
		.when('/addStudent', {
			templateUrl: 'addStudent.htm',
			controller: 'AddStudentController'
		});
		$routeProvider.when('/viewStudents', {
			templateUrl: 'viewStudents.htm',
			controller: 'ViewStudentsController'
		});
		$routeProvider.when('/detail', {
			templateUrl: 'detail.html',
			controller: 'detail'
		});
		$routeProvider.otherwise({
			templateUrl: 'list.html',
			controller: 'PhoneListCtrl'
		});
	}]);

	phonecatApp.controller('AddStudentController', function($scope,Data) {

		$scope.pageClass = "pageGo";
		$scope.message = "This page will be used to display add student form";

		Data.log("123456789");
		console.log(Data.message);

		Data.message = "987654312";
	});

	phonecatApp.controller('ViewStudentsController', function($scope,Data,MyService) {
		$scope.pageClass = "pageGo";
		$scope.message = MyService.greeting;

		console.log(Data.message);
	});

	phonecatApp.controller('detail', function($scope, $http, $routeParams) {
		$scope.test = function() {

		}
		$scope.pageClass = "pageGo";
		$scope.mobile = $routeParams.mobile;

		(function() {
			$http.get("data.php").success(function(response) {
				$scope.name = "asdfasdf";
			});
		})();

	});


	phonecatApp.controller('PhoneListCtrl', function($scope, $http, $routeParams, $cacheFactory) {

		$scope.listshow = true;
		$scope.init = false;
		$scope.pageClass = "pageGo";

		$("#getJson").click(function() {});

		// var cache = $cacheFactory('myCache');


		$scope.test = function() {
			$scope.loading = true;
			$http.get("data.php").success(function(response) {
				$scope.phones = response.data;
				$scope.info = response.info;
				$scope.loading = false;
				$scope.init = true;
				$routeParams['cache_key'] = response.rand;
				// console.log("Rand: " + response.rand);
				sessionStorage.setItem('phones', JSON.stringify(response.data));
				// console.log();
			});
		}

		$scope.loading = false;

		cache = "";
		try {
			$scope.phones = jQuery.parseJSON(sessionStorage.getItem('phones'));
			if (!$scope.phones) {
				$scope.test();
			}
		} catch (err) {
			$scope.test();
		}



		// console.log(localStorage.getItem('Rand'));

		$scope.view = function(md) {
			if (md == 'list') {
				$scope.listshow = true;
			} else {
				$scope.listshow = false;
			}
		}
	});
	</script>
</body>

</html>
